<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入新数字进入新数组进行排序</title>
    <style>
        #num1{
            display: inline-block;
            width: 150px;
            height: 50px;
            background: green;
            font-size: 25px;
            font-weight: 600;
        }
        #btn{
            display: inline-block;
            width: 100px;
            height: 50px;
            background: pink;
            border-radius: 30px;
            font-size: 20px;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <input type="text" id="num1">
    <input type="button" value="插入" id="btn" >
    <p id="output"></p>
    <!-- /* -->
    <!-- 有一个从小到大排好序的数组。现输入一个数，要求按原来的规律将它插入数组中 -->
 <!-- */ -->
 <script>
var output = document.getElementById('output');
var arr = [10, 8, 3, 20, 66, 5, 7];
// 一打开页面就排序原来的数组 并且显示在页面中
paixu(arr);
btn.onclick = function () {
    // 当num.value 为true的时候，才添加的数组
    if (num1.value) {
        // 点击插入按钮，获取输入框的值，把值添加到数组中
        arr.push(num1.value);
        // 数组中的数据改变了，页面的数据也要相应的改变，就是重新执行函数
        paixu(arr);
    }
    num1.value='';
}
function paixu(arr) {
    // 把数组从小到大排序
    arr.sort(function (a, b) {
        return a - b;
    }
    )
    // 把数组显示在output之中
    output.innerHTML = '[' + arr + ']';
}
</script>
</body>
</html>